<!--
 * @Descripttion:
 * @version:
 * @Author: zhangzhanhua
 * @Date: 2021-01-08 19:56:20
 * @LastEditors: zhangzhanhua
 * @LastEditTime: 2021-03-08 16:07:30
-->
<template>
  <div class="list">

    <div style="background:#e3e3e3">
      <div class="list-ul" v-for="(item, index) in leftData" :key="index">
        <div class="list-li" :class="item.heightLight?'heightLight':''" @click="highlightClick(item.title, index+1)">
          <span class="image-style">
            <span class="brg-color" :style="{ backgroundColor: item.color }">
              <span class="iconfont" :class="item.icon"></span>
            </span>
          </span>
          <div class="txt-style">
            <div class="title">{{ item.title }}</div>
            <div class="content1">{{ item.content }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="txt" v-for="(item,index) in rightTwoData" :key="index">
        <div class="headline" @click="titleShowClick(index)">
          <div class="read" :class="item.isReader == '未读' ? 'readStyle' : ''"></div>
          <span class="titleName">
            {{item.title}}
          </span>
          <span class="time">{{item.time}}</span>
        </div>
        <transition name="sub-comments">
          <div class="text" v-if="item.textShow">{{item.content}} </div>
        </transition>
      </div>
      <div class="tips" v-if="rightTwoData.length == 0">
        暂无消息
      </div>

      <!-- <div class="show-more" @click="moreClick()" v-if="rightTwoData.length !=0">
        我是有底线的
      </div> -->
    </div>
  </div>
</template>

<script>
// import { actions } from "../../../store/index";

export default {
  props: {
    leftIndex: {
      type: Number | String
    },
    getName: {
      type: Function
    },
  },
  vuex: {
    // actions: actions,
    getters: {
      // 过滤后的会话列表
      sessions: ({ sessions, filterKey }) => {
        let result = sessions.filter((session) =>
          session.name.includes(filterKey)
        );
        return result;
        console.log(result, "测试消息结果");
      },
      // 当前会话index
      currentId: ({ currentSessionId }) => currentSessionId,
    },
  },
  data() {
    return {
      pagesize: 15,
      startpage: 1,
      target: '01',//01 个人 02部门 03项目组
      rightTwoData: [],//消息列表
      leftTwoData: [
        {
          title: "通知",
          content: "暂无新通知",
          color: "#338CE8",
          icon: "icon-gerenxiaoxi_lef_p",
          heightLight: true,
        }],
      moAvator: require("@/assets/icon/morentouxiang.svg"),
      leftData: [
        {
          title: "个人消息",
          content: "暂无新消息",
          color: "#338CE8",
          icon: "icon-gerenxiaoxi_lef_p",
          heightLight: true,
        },
        {
          title: "部门消息",
          content: "暂无新消息",
          color: "#F7B500",
          icon: "icon-gerenxiaoxi_lef_p",
          heightLight: false,
        },
        {
          title: "项目组消息",
          content: "暂无新消息",
          color: "#FA6400",
          icon: "icon-gerenxiaoxi_lef_p",
          heightLight: false,
        },
      ],
    };
  },
  computed: {
    sessions() {
      return this.$store.state.sessions;
    },
    currentId() {
      return this.$store.state.currentSessionId;
    },
  },
  methods: {
    getNotice() {
      var _this = this
      _this.$http.get(`${this.$ServiceName}/api/external/cloud/${this.$version}/queryall?pagesize=${this.pagesize}&startpage=${this.startpage}&target=${this.target}`).then((res) => {
        let data = res.data.data.pages
        if (data != undefined && data.length != 0) {
          data.map((item, index) => {
            this.rightTwoData.push({
              id: item.id,
              title: item.title,
              time: item.sendTime,
              content: item.content,
              isReader: item.isReader == 0 ? '未读' : '已读',
              textShow: false,
            })
          })
          if (this.pagesize > this.rightTwoData.length) {
            // this.more = '我是有底线的~'
          }
        } else {
          this.rightTwoData = []
          // this.rightTwoData.push({
          //     id: '3333',
          //     title: '个人消息',
          //     time: '2020-11',
          //     content: 'nihaoma',
          //     isReader: '未读',
          //     textShow: false,
          //   })
        }
      }).catch(error => { })
    },
    //已读未读逻辑判断
    titleShowClick(index) {
      var _this = this
      if (_this.rightTwoData[index].isReader == '未读') {
        console.log(_this.rightTwoData[index])
        _this.$http.put(`${this.$ServiceName}/api/external/cloud/${this.$version}/updatebyid`, {
          id: _this.rightTwoData[index].id
        }).then((res) => {
          this.rightTwoData[index].textShow = !this.rightTwoData[index].textShow
          this.rightTwoData[index].isReader = '已读'
        }).catch(error => { })
      } else {
        this.rightTwoData[index].textShow = !this.rightTwoData[index].textShow
        this.rightTwoData[index].isReader = '已读'
      }

    },
    selectSession(id) {
      this.$store.commit("SELECT_SESSION", id);
    },
    //高亮消息通知
    highlightClick(title, index) {
      this.target = '0' + index
      this.getNotice() //切换消息来源
      this.leftData.map((res, Lindex) => {
        if (Lindex == index - 1) {
          res.heightLight = true
        } else {
          res.heightLight = false
        }
      })
      // this.getName(title)
    },
  },
  mounted() {
    this.getNotice();
  },
};
</script>

<style scoped lang="less">
.content {
  width: 100%;
  height: 90%;
  font-size: 30px;
  padding-top: 40px;
  overflow: auto;

  .txt {
    background: #ffffff;
    border-radius: 6px;
    padding: 5px 15px;
    margin: 10px 28px;

    .headline {
      font-size: 14px;
      color: #303133;
      margin: 10px 0;
      position: relative;
      .titleName {
        cursor: pointer;
        position: relative;
      }
      .titleName:hover {
        color: blue;
      }
      .read {
        font-size: 10px;
        position: absolute;
        left: -2%;
        top: -106%;
        width: 4px;
        height: 4px;
        border-radius: 50%;
      }
      .readStyle {
        border: 1px solid red;
        background-color: red;
      }
      .time {
        float: right;
        font-size: 12px;
        color: #909399;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
    .text {
      font-size: 12px;
      color: #606266;
      line-height: 20px;
      text-align: justify;
    }
  }
  .tips {
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
  }
  .show-more {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
  }
  .show-more:active {
    color: #60c5f1;
  }
  .page {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
.heightLight {
  background-color: #e8eaec !important;
}
// ::-webkit-scrollbar {
// display: none;
// }
.list-ul {
  width: 250px;
  // overflow: auto;
  .list-li {
    width: 96%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2%;
    .image-style {
      width: 25%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .brg-color {
        width: 32px;
        height: 32px;
        background-color: #f7b500;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        span {
          color: #fff;
        }
      }
    }
    .txt-style {
      width: 75%;
      height: 50%;
      .title {
        height: 50%;
        font-size: 14px;
        color: #303133;
        display: flex;
        align-items: center;
      }
      .content1 {
        // display: flex;
        // align-items: center;
        height: 50%;
        width: 100%;
        font-size: 12px;
        color: #909399;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        align-items: center;
      }
    }
  }
  .highlight {
    background-color: #e8eaec !important;
  }
}
.list {
  height: 100%;
  display: flex;
  background: #efefef;
  ul {
    overflow: hidden;
  }

  overflow-y: auto;
  li {
    width: 96%;
    height: 60px;
    display: flex;
    align-items: center;
    // justify-content: center;
    padding-left: 9%;
    &:hover {
      background-color: #e8eaec !important;
    }
    &.active {
      background-color: #e8eaec !important;
    }
  }
  .avatar,
  .name {
    vertical-align: middle;
  }
  .avatar {
    border-radius: 2px;
  }
  .name {
    display: inline-block;
    margin: 0 5px 0 15px;
    color: rgb(36, 32, 32);
  }
}
</style>
